<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>About</title>
    <!-- google-fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap"
        rel="stylesheet">
    <!-- //google-fonts -->
    <!-- Template CSS Style link -->
    <link rel="stylesheet" href="assets/css/style-starter.css">
</head>

<body>
    <!--header-->
    <header id="site-header" class="fixed-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg stroke">
                <h1>
                    <a class="navbar-brand d-flex align-items-center" href="index.html">
                        Farmstead<i class="fa fa-leaf" aria-hidden="true"></i> </a>
                </h1>
                <!-- if logo is image enable this
    <a class="navbar-brand" href="#index.html">
        <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
    </a> -->
                <div class="navbar ml-lg-auto">
                    <!-- menu -->
                    <ul id="menu">
                        <li>
                            <input id="check02" type="checkbox" name="menu" />
                            <label for="check02"><span class="fa fa-bars" aria-hidden="true"></span></label>
                            <ul class="submenu">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html" class="active">About Us</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="contact.html">Contact Us</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!-- //menu -->
                    <!-- search button -->
                    <div class="search-right ml-lg-3">
                        <form id="demo-2" action="#search" method="GET">
                            <input type="search" placeholder="Search" name="search" required="required">
                        </form>
                    </div>
                    <!-- //search button -->
                    <!-- toggle switch for light and dark theme -->
                    <div class="cont-ser-position mr-5">
                        <nav class="navigation">
                            <div class="theme-switch-wrapper">
                                <label class="theme-switch" for="checkbox">
                                    <input type="checkbox" id="checkbox">
                                    <div class="mode-container">
                                        <i class="gg-sun"></i>
                                        <i class="gg-moon"></i>
                                    </div>
                                </label>
                            </div>
                        </nav>
                    </div>
                    <!-- //toggle switch for light and dark theme -->
                </div>
            </nav>
        </div>
    </header>
    <!--//header-->

    <!-- inner banner -->
    <div class="inner-banner">
        <section class="w3l-breadcrumb py-5">
            <div class="container py-lg-5 py-sm-4 mt-5">
                <h4 class="inner-text-title font-weight-bold mb-2">About Us</h4>
                <ul class="breadcrumbs-custom-path">
                    <li><a href="index.html">Home</a></li>
                    <li class="active"><span class="fa fa-chevron-right mx-2" aria-hidden="true"></span>About Us</li>
                </ul>
            </div>
        </section>
    </div>
    <!-- //inner banner -->

    <!-- about section -->
    <div class="w3l-content-photo-5 py-5">
        <div class="container py-md-5 py-4">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 content-left pr-xl-5">
                        <h5 class="small-title">Welcome</h5>
                        <h3 class="title-style">We are agriculture Farm</h3>
                        <p class="mt-3">Tincidunt ultrices nunc vel pellentesque. Class aptent taciti sociosqu ad litora
                            torquent per
                            conubia nostra. Lorem ipsum viverra feugiat. Pellen tesque libero ut justo, ultrices in
                            ligula. Semper at tempufddfel id eleifend eros.</p>
                        <p class="mt-3">Aenean volutpat elementum ante, id eleifend eros
                            luctus sit
                            amet. vel tincidunt erat neque non ipsum. Ut sollicitudin pharetra enim.</p>
                        <a class="btn btn-style mt-4" href="#blog">Learn More </a>
                    </div>
                    <div class="col-lg-6 content-photo mt-lg-0 mt-5">
                        <img src="assets/images/about.jpg" class="img-fluid img-responsive" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- //about section -->

    <!-- stats -->
    <section class="w3_stats py-5" id="stats">
        <div class="container pb-md-5 pb-5">
            <div class="w3-stats text-center">
                <div class="row">
                    <div class="col-md-3 col-6">
                        <div class="counter">
                            <span class="fa fa-bullhorn"></span>
                            <div class="timer count-title count-number mt-3" data-to="1286" data-speed="1500"></div>
                            <p class="count-text">Our Farms</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-6">
                        <div class="counter">
                            <span class="fa fa-shopping-basket"></span>
                            <div class="timer count-title count-number mt-3" data-to="36076" data-speed="1500"></div>
                            <p class="count-text">Agriculture Products</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mt-md-0 mt-5">
                        <div class="counter">
                            <span class="fa fa-smile-o"></span>
                            <div class="timer count-title count-number mt-3" data-to="16300" data-speed="1500"></div>
                            <p class="count-text">Happy Customers</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mt-md-0 mt-5">
                        <div class="counter">
                            <span class="fa fa-trophy"></span>
                            <div class="timer count-title count-number mt-3" data-to="10630" data-speed="1500"></div>
                            <p class="count-text">Awards Won</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //stats -->

    <!-- team section -->
    <section class="w3l-team-61 py-5">
        <div class="container py-md-5 py-4">
            <div class="row title-style-main align-items-center mb-sm-5 mb-4 pb-lg-4">
                <div class="col-md-6 section-heading position-relative">
                    <h5 class="small-title mb-2 text-white">Our Team</h5>
                    <h3 class="title-style text-white">
                        Experienced and Professional Team </h3>
                    <h4 class="title-bg-content">Team</h4>
                </div>
                <div class="col-md-6 section-heading">
                    <p class="lead text-white">
                        Sed ut perspiciatis unde omnis iste natus error sit accusantium doloremque,
                        eaque ipsa quae ab illo inventore.Sed ut perspiciatis unde omnis iste natus error sit.
                    </p>
                </div>
            </div>
            <div class="team-right-content row text-center justify-content-center">
                <div class="col-lg-4 col-sm-6">
                    <div class="teams-gd">
                        <div class="team-member">
                            <div class="team-img">
                                <a href="#team"><img class="img-fluid img-responsive" src="assets/images/team1.jpg"
                                        alt=""></a>
                            </div>
                            <div class="team-hover">
                                <div class="desk">
                                    <h4><a href="#team">Meet Me</a></h4>
                                    <p>Lorem ipsum dolor sit amet,Ea consequuntur </p>
                                </div>
                                <div class="s-link">
                                    <a href="#facebook"><span class="fa fa-facebook"></span></a>
                                    <a href="#twitter"><span class="fa fa-twitter"></span></a>
                                    <a href="#google-plus"><span class="fa fa-google-plus"></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="team-title pt-3">
                            <h5><a href="#team">Shona Leer</a></h5>
                            <span>Food Production</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mt-sm-0 mt-4">
                    <div class="teams-gd">
                        <div class="team-member">
                            <div class="team-img">
                                <a href="#team"><img class="img-fluid img-responsive" src="assets/images/team2.jpg"
                                        alt=""></a>
                            </div>
                            <div class="team-hover">
                                <div class="desk">
                                    <h4><a href="#team">Meet Me</a></h4>
                                    <p>Lorem ipsum dolor sit amet,Ea consequuntur </p>
                                </div>
                                <div class="s-link">
                                    <a href="#facebook"><span class="fa fa-facebook"></span></a>
                                    <a href="#twitter"><span class="fa fa-twitter"></span></a>
                                    <a href="#google-plus"><span class="fa fa-google-plus"></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="team-title pt-3">
                            <h5><a href="#team">Brock Lee</a></h5>
                            <span>Farmer</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mt-lg-0 mt-4">
                    <div class="teams-gd">
                        <div class="team-member">
                            <div class="team-img">
                                <a href="#team"><img class="img-fluid img-responsive" src="assets/images/team3.jpg"
                                        alt=""></a>
                            </div>
                            <div class="team-hover">
                                <div class="desk">
                                    <h4><a href="#team">Meet Me</a></h4>
                                    <p>Lorem ipsum dolor sit amet,Ea consequuntur </p>
                                </div>
                                <div class="s-link">
                                    <a href="#facebook"><span class="fa fa-facebook"></span></a>
                                    <a href="#twitter"><span class="fa fa-twitter"></span></a>
                                    <a href="#google-plus"><span class="fa fa-google-plus"></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="team-title pt-3">
                            <h5><a href="#team">Maya Didas</a></h5>
                            <span>Harvester</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //team section -->

    <!-- video section -->
    <section class="w3l-index5" id="about">
        <div class="new-block py-5">
            <div class="container py-lg-5">
                <div class="middle-section text-center">
                    <div class="section-width">
                        <h3 class="title-style">We Provide only fresh and healthy Products!</h3>
                        <p class="mt-3">Lorem ipsum, dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit
                            amet elit consec tetur adipisi elit.

                            Lorem ipsum dolor sit amet elit consec tetur adipisi elit. Iure voluptatibus explicabo
                            officia.</p>
                    </div>
                    <div class="history-info mt-5">
                        <div class="position-relative">
                            <img src="assets/images/video.jpg" class="img-fluid img-responsive video-popup-image"
                                alt="video-popup">

                            <a href="#small-dialog"
                                class="popup-with-zoom-anim play-view text-center position-absolute">
                                <span class="video-play-icon">
                                    <span class="fa fa-play"></span>
                                </span>
                            </a>

                            <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
                            <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
                                <iframe src="https://www.youtube.com/embed/Wl3nAdJfWpo" frameborder="0"
                                    allow="autoplay; fullscreen" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //video section -->

    <!-- testimonials -->
    <section class="w3l-clients-1 py-5" id="testimonials">
        <div class="cusrtomer-layout py-5">
            <div class="container py-md-5 py-4">
                <div class="testimonial-row">
                    <div id="owl-demo2" class="owl-two owl-carousel owl-theme mb-md-3 mb-sm-5 mb-4">
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="row testimonial align-items-center">
                                    <div class="col-md-3 testi-des">
                                        <a href="#url" class="testi-img">
                                            <img src="assets/images/testi1.jpg" alt="" class="radius-image img-fluid">
                                        </a>
                                        <div class="peopl align-self">
                                            <h3>Dennis wilson</h3>
                                            <p class="identity">Customer </p>
                                        </div>
                                    </div>
                                    <div class="col-md-9 pl-lg-5">
                                        <blockquote>
                                            <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita
                                                beatae
                                                laudantium Quas minima sunt natus tempore, maiores aliquid modi felis
                                                sequi optio lacinia id ipsum non velit, culpa.
                                                voluptate rem ullam dolore nisi est quasi, doloribus tempora.
                                                est elit. Non quae, fugiat ad libero justo sed amet.</q>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="row testimonial align-items-center">
                                    <div class="col-md-3 testi-des">
                                        <a href="#url" class="testi-img">
                                            <img src="assets/images/testi2.jpg" alt="" class="radius-image img-fluid">
                                        </a>
                                        <div class="peopl align-self">
                                            <h3>Dennis wilson</h3>
                                            <p class="identity">Customer </p>
                                        </div>
                                    </div>
                                    <div class="col-md-9 pl-lg-5">
                                        <blockquote>
                                            <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita
                                                beatae
                                                laudantium Quas minima sunt natus tempore, maiores aliquid modi felis
                                                sequi optio lacinia id ipsum non velit, culpa.
                                                voluptate rem ullam dolore nisi est quasi, doloribus tempora.
                                                est elit. Non quae, fugiat ad libero justo sed amet.</q>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="row testimonial align-items-center">
                                    <div class="col-md-3 testi-des">
                                        <a href="#url" class="testi-img">
                                            <img src="assets/images/testi3.jpg" alt="" class="radius-image img-fluid">
                                        </a>
                                        <div class="peopl align-self">
                                            <h3>Dennis wilson</h3>
                                            <p class="identity">Customer </p>
                                        </div>
                                    </div>
                                    <div class="col-md-9 pl-lg-5">
                                        <blockquote>
                                            <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita
                                                beatae
                                                laudantium Quas minima sunt natus tempore, maiores aliquid modi felis
                                                sequi optio lacinia id ipsum non velit, culpa.
                                                voluptate rem ullam dolore nisi est quasi, doloribus tempora.
                                                est elit. Non quae, fugiat ad libero justo sed amet.</q>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //testimonials -->

    <!-- footer -->
    <section class="w3l-footer-16">
        <div class="w3l-footer-16-main py-5">
            <div class="container py-4">
                <div class="row footer-p">
                    <div class="col-lg-4 order-lg-1 order-3 mt-lg-0 mt-5">
                        <h4>
                            <a class="logo" href="index.html">Farmstead<i class="fa fa-leaf"
                                    aria-hidden="true"></i></a>
                        </h4>
                        <p class="mt-4">Duis imperdiet sapien tortor, vitae congue diam auctor vitae. Aliquam
                            eget turpis ornare, euismod ligul aeget, enenatis dui. </p>

                        <p class="copy-text mt-5">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                    </div>
                    <div class="col-lg-4 pl-lg-5">
                        <h3>Find Us</h3>
                        <div class="column-2">
                            <p>Address: 10001 Alleghany st, 5th Avenue, 235 Terry, London.</p>
                            <p class="mt-3">Phone: <a href="tel:+12 23456790">+ 12 234 56790</a></p>
                            <p class="mt-3"> Email: <a href="mailto:info@example.com">info@example.com</a></p>
                            <p class="mt-3">Fax: <a href="tel:+12 23456790">+ 11 367 21890</a></p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-7 order-lg-3 order-1 column mt-lg-0 mt-5">
                        <h3>Newsletter</h3>
                        <div class="end-column">
                            <p>Subscribe to our mailing list and get updates to your email inbox.</p>
                            <form action="#" class="subscribe d-flex mt-3" method="post">
                                <input type="email" name="email" placeholder="Email Address" required="">
                                <button><span class="fa fa-paper-plane" aria-hidden="true"></span></button>
                            </form>
                        </div>
                        <ul class="social mt-4 pt-2">
                            <li><a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
                            </li>
                            <li><a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
                            </li>
                            <li><a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
                            </li>
                            <li><a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
                            </li>
                            <li><a href="#github"><span class="fa fa-github" aria-hidden="true"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //footer -->

    <!-- Js scripts -->
    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
        <span class="fa fa-level-up" aria-hidden="true"></span>
    </button>
    <script>
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("movetop").style.display = "block";
            } else {
                document.getElementById("movetop").style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
    <!-- //move top -->

    <!-- common jquery plugin -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <!-- //common jquery plugin -->

    <!-- /counter-->
    <script src="assets/js/counter.js"></script>
    <!-- //counter-->

    <!-- owl carousel -->
    <script src="assets/js/owl.carousel.js"></script>
    <!-- script for tesimonials carousel slider -->
    <script>
        $(document).ready(function () {
            $("#owl-demo2").owlCarousel({
                loop: true,
                margin: 20,
                nav: false,
                responsiveClass: true,
                autoplay: false,
                autoplayTimeout: 5000,
                autoplaySpeed: 1000,
                autoplayHoverPause: false,
                responsive: {
                    0: {
                        items: 1,
                        nav: false
                    },
                    1000: {
                        items: 1,
                        nav: false,
                        loop: false
                    }
                }
            })
        })
    </script>
    <!-- //script for tesimonials carousel slider -->

    <!-- theme switch js (light and dark)-->
    <script src="assets/js/theme-change.js"></script>
    <script>
        function autoType(elementClass, typingSpeed) {
            var thhis = $(elementClass);
            thhis.css({
                "position": "relative",
                "display": "inline-block"
            });
            thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
            thhis = thhis.find(".text-js");
            var text = thhis.text().trim().split('');
            var amntOfChars = text.length;
            var newString = "";
            thhis.text("|");
            setTimeout(function () {
                thhis.css("opacity", 1);
                thhis.prev().removeAttr("style");
                thhis.text("");
                for (var i = 0; i < amntOfChars; i++) {
                    (function (i, char) {
                        setTimeout(function () {
                            newString += char;
                            thhis.text(newString);
                        }, i * typingSpeed);
                    })(i + 1, text[i]);
                }
            }, 1500);
        }

        $(document).ready(function () {
            // Now to start autoTyping just call the autoType function with the 
            // class of outer div
            // The second paramter is the speed between each letter is typed.   
            autoType(".type-js", 200);
        });
    </script>
    <!-- //theme switch js (light and dark)-->

<!-- magnific popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

            $('.popup-with-move-anim').magnificPopup({
                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-slide-bottom'
            });
        });
    </script>
    <!-- //magnific popup -->

    <!-- MENU-JS -->
    <script>
        $(window).on("scroll", function () {
            var scroll = $(window).scrollTop();

            if (scroll >= 80) {
                $("#site-header").addClass("nav-fixed");
            } else {
                $("#site-header").removeClass("nav-fixed");
            }
        });

        //Main navigation Active Class Add Remove
        $(".navbar-toggler").on("click", function () {
            $("header").toggleClass("active");
        });
        $(document).on("ready", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
            $(window).on("resize", function () {
                if ($(window).width() > 991) {
                    $("header").removeClass("active");
                }
            });
        });
    </script>
    <!-- //MENU-JS -->

    <!-- disable body scroll which navbar is in active -->
    <script>
        $(function () {
            $('.navbar-toggler').click(function () {
                $('body').toggleClass('noscroll');
            })
        });
    </script>
    <!-- //disable body scroll which navbar is in active -->

    <!--bootstrap-->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- //bootstrap-->
    <!-- //Js scripts -->
</body>

</html>